import {React} from 'react'
import { Routes, Route } from 'react-router-dom'
import Layout from './components/Layout';
import NeedAuth from './components/NeedAuth';
import useAuthLoginout from './hooks/useAuthLoginout';
import AuthPage from './pages/AuthPage';
import HomePage from './pages/HomePage';
import ProfilePage from './pages/ProfilePage';

function App() {
  useAuthLoginout()
  return (
    <div>
      {/* 
        App.js专门负责路由页面注册
        Layout.js专门负责组件布局
      */}
      <Layout>
        <Routes>
          <Route path={'/'} element={<HomePage></HomePage>}></Route>
          <Route path={'/profile'} element={<NeedAuth><ProfilePage></ProfilePage></NeedAuth>}></Route>
          <Route path={'/authForm'} element={<AuthPage></AuthPage>}></Route>
        </Routes>
      </Layout>
    </div>
  )
}
export default App;
